<%@ page language="java" pageEncoding="UTF-8"%>
<%@include   file="header.jsp" %>
<%@include   file="search.jsp" %>
<%@include   file="banner.jsp" %>
<script>
  var kechengfenlei = "";//课程分类
  var kechengSub = "";//课程子分类
  
  function kechengSubInfo(subInfo){
	  
  }
  function kechengInfo(typeInfo){
	  jQuery(this).attr("class","selected00");
	  jQuery.ajax({
	        url: "${imgpath}/course/listRecommendCourseByTypeAndSubType",
	        dataType: "json",
	        data: {
	            'typeId': typeInfo,
	            'rows':16,
	            'page':0
	        },
	        success: function( data ) {
	        	jQuery("#course_center_list").html("");
	        	//alert(data);
	        	fullCourseCenterInfo(data.rows);
	        },
	        error: function(){
              //alert('123');
          } 
	    });
	  
	  function fullCourseCenterInfo(data){
		  //清除显示部分的原有内容
		  
		  var dataInfo = "";
		  for(var i=0;i<data.length;i++){
			  if(i%4 == 0){
				  dataInfo = "<div class=\"gkk_bodycour\">" ;
				  
			  }
			  dataInfo = dataInfo +"<div class=\"gkk_body01\"><div class=\"gkk_body02\"> <img src=\"${imgpath}/images/gkk/gkk_01.jpg\"> </div><div class=\"gkk_body03\">"+data[i].courseName+"</div><div class=\"gkk_body00\" onMouseOver=\"this.className='gkk_bodyhid'\" onMouseOut=\"this.className='gkk_body00'\" ><div class=\"gkk_bodyopa01\"><h2>"+data[i].courseName+"</h2><p>"+data[i].courseName+"</p></div><div class=\"gkk_bodyopa02\"> <span style=\"float:left\"> <img src=\"${imgpath}/images/gkk/bf00.png\"  align=\"absmiddle\" /> 播放：888</span> <span style=\"float:right\"> <img src=\"${imgpath}/images/gkk/pl01.png\" align=\"absmiddle\"> 评论：999</span> </div></div></div>";
		      if(i%4 == 3){
		    	  dataInfo = dataInfo+"</div>";
		      }
		  }
		  jQuery("#course_center_list").html(dataInfo);
		  
	  }
  }
  
</script>
<div class="kczx_divbody">
	<div class="kczx_divl"> <br/>
		<!--课程分类-->
		<div class="kczx_divl01 kczx_text01">
			<div class="selected02">课程分类：</div>
			<div class="selected002" style="color:#000;"></div>
			<a href="#">
			<div class="selected00"> 全部</div>
			</a>
			
			
			<c:forEach items="${courseTypeBeanList}" var="eitem" varStatus="status">
			 <div class="selected002"></div>
			   <a onClick="javaScript:kechengInfo(${eitem.id })" href="#">
			       <div class="selected001"> ${eitem.courseTp }</div>
			   </a>
			</c:forEach>
			</div>
		<!--课程分类--> 
		
		<!--课程列表导航-->
		<div class="gkk_top">
			<div class="gkk_toptitle"> <a  onClick="javaScript:kechengSubInfo('liebiao')" href="#">
				<div class="gkk_toptitle01"> 课程列表 </div>
				</a> <a onClick="javaScript:kechengSubInfo('zuixin')" href="#">
				<div class="gkk_toptitle02"> 最新 </div>
				</a> <a onClick="javaScript:kechengSubInfo('tuijian')" href="#">
				<div class="gkk_toptitle02"> 推荐 </div>
				</a> <a onClick="javaScript:kechengSubInfo('remen')" href="#">
				<div class="gkk_toptitle02"> 热门 </div>
				</a> <a onClick="javaScript:kechengSubInfo('zhuanti')" href="#">
				<div class="gkk_toptitle02"> 专题 </div>
				</a> </div>
		</div>
		<!--end课程列表导航-->
		
		<div class="kczx_divl00"> </div>
		<div id="course_center_list">
		   <c:forEach items="${courseRecommendVoList}" var="courseRecommendVo" varStatus="status">
            <c:if test="${status.index%4==0}" >
              <div class="gkk_bodycour">
            </c:if>
             <div class="gkk_body01">
			   <div class="gkk_body02"> <img src="${imgpath}/images/gkk/gkk_01.jpg"> </div>
			   <div class="gkk_body03">${courseRecommendVo.courseName }</div>
			   <div class="gkk_body00" onMouseOver="this.className='gkk_bodyhid'" onMouseOut="this.className='gkk_body00'" >
				<div class="gkk_bodyopa01">
					<h2> ${courseRecommendVo.courseName }</h2>
					<p> ${courseRecommendVo.courseName }</p>
				</div>
				<div class="gkk_bodyopa02"> <span style="float:left"> <img src="${imgpath}/images/gkk/bf00.png"  align="absmiddle" /> 播放：888</span> <span style="float:right"> <img src="${imgpath}/images/gkk/pl01.png" align="absmiddle"> 评论：999</span> </div>
			  </div>
		     </div>
            <c:if test="${status.index%4==3}" >
              </div>
            </c:if>
          </c:forEach>
		   
		</div>
		
		
		
		
		<!--end分页按钮--> 
		
	</div>
	<div class="kczx_divr"> <br/>
		<div class=" home_textdiv01 home_text01">推荐课程</div>
		<div class="kczx_divrt"> <br/>
			<table style="width:230px;height:400px;">
				<tbody>
					
					<c:forEach items="${recommendCourse}" var="eitem" varStatus="status">
					   <tr style="height:80px;">
						<td style="width:100px;height:75px;"> <a href="${jspath}/course/getCourseInfo?courseId=${eitem.courseId}&channelInfo=${eitem.courseClass == '1'?"gkk":"kczx"}"> <img src="${imgpath}/images/kczx_images/${eitem.coursePic}" > </a> </td>
						<td  valign="top"><a href="${jspath}/course/getCourseInfo?courseId=${eitem.courseId}&channelInfo=${eitem.courseClass == '1'?"gkk":"kczx"}" target="_blank">${eitem.courseName}</a>
							<div>
							  <span class="retext05"> 
							    <c:if test="${eitem.courseStudyNum!=null}">
                                   ${eitem.courseStudyNum}
                                </c:if>
                                <c:if test="${eitem.courseStudyNum==null}">
                                  0
                                </c:if>
                               </span> 
                                                                                                          人学习
                            </div>
						</td>
					</tr>
					</c:forEach>
					
				</tbody>
			</table>
		</div>
		<div class=" home_textdiv01 home_text01">最新动态</div>
		<div class="kczx_divrb"> <br/>
			<table style="width:220px; height:360px;">
				<tr>
					<td style="width:50px;height:50px"><a href="#"><img src="${imgpath}/images/kczx_images/user01.jpg" ></a> </td>
					<td> vivian学习了基础心理学课程<br/>
						20分钟前 </td>
				</tr>
				<tr style="height:35px"> </tr>
				<tr>
					<td style="width:50px;height:50px"><a href="#"><img src="${imgpath}/images/kczx_images/user01.jpg" ></a> </td>
					<td>vivian学习了基础心理学课程<br/>
						20分钟 </td>
				</tr>
				<tr style="height:35px"> </tr>
				<tr>
					<td style="width:50px;height:50px"><a href="#"><img src="${imgpath}/images/kczx_images/user01.jpg" ></a> </td>
					<td>vivian学习了基础心理学课程<br/>
						20分钟 </td>
				</tr>
				<tr style="height:35px"> </tr>
				<tr>
					<td style="width:50px;height:50px"><a href="#"><img src="${imgpath}/images/kczx_images/user01.jpg" ></a> </td>
					<td>vivian学习了基础心理学课程<br/>
						20分钟 </td>
				</tr>
				<tr style="height:35px"> </tr>
				<tr>
					<td style="width:50px;height:50px"><a href="#"><img src="${imgpath}/images/kczx_images/user01.jpg" ></a> </td>
					<td>vivian学习了基础心理学课程20分钟 </td>
				</tr>
			</table>
		</div>
	</div>
</div>
</div>
<%@include   file="footer.jsp" %>